<script>
  import { getDeptTree, getDeptUser } from '@/api/organization'
  export default {
    name: 'SelectUser',
    components: {},
    props: {
      isWechat: {
        type: Boolean,
        default: true
      },
      // 添加标签显隐
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '组织架构'
      },
      // 是否 只选择叶子节点（人员节点）/禁止选择父节点（部门节点）
      isOnlyLeaf: {
        type: Boolean,
        default: true
      },
      // 是否单选
      isSigleSelect: {
        type: Boolean,
        default: false
      },
      // 默认选中的节点
      defaultValues: {
        type: Array,
        default: () => [],
        // 必须含有userId和name属性
        validator(val) {
          return val.every((e) => e.userId && e.name)
        }
      },
      // 禁止选中的节点
      disabledValues: {
        type: Array,
        default: () => []
      },
      destroyOnClose: Boolean
    },
    data() {
      return {
        treeData: [],
        userList: [],
        defaultKeys: [],
        deptId: '', //根部门Id
        keywords: '',
        searchResult: [],
        searchState: false,
        checked: []
      }
    },
    watch: {
      defaultValues(value) {
        const checkedUserList = []
        if (!Array.isArray(value) || value.length == 0) {
          this.userList = []
        } else {
          value.forEach((i) => {
            const id = i.userId || i.id
            if (id) {
              checkedUserList.push(i)
            }
          })
          this.userList = checkedUserList
        }
      },
      Pvisible(val) {
        val && this.$refs.tree && this.$refs.tree.setCheckedKeys(this.defaultValues.map((e) => e.userId || e.id))
      }
    },
    computed: {
      Pvisible: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      },
      defaultProps() {
        let that = this
        return {
          label: 'name',
          children: 'children',
          disabled(data, node) {
            return (that.isOnlyLeaf && data.isParty) || that.disabledValues.some((e) => e == (data.userId || data.id))
          },
          isLeaf(data, node) {
            return !data.id
          }
        }
      }
    },
    created() {},
    mounted() {},
    methods: {
      setChange(e) {
        if (!e) {
          this.searchState = false
          this.$refs.tree.setCheckedKeys(this.userList.map((e) => e.userId || e.id))
        }
      },
      setSearch() {
        if (!this.keywords) return
        this.searchResult = []
        this.searchState = true
        this.checked = this.userList.map((dd) => {
          return dd.userId
        })
        getDeptUser({
          // deptId: this.deptId,
          userName: this.keywords
        }).then((res) => {
          this.searchResult = this.handleUser(res.rows)
        })
      },
      setSelectChange(e, index) {
        if (e) {
          if (this.isSigleSelect) {
            this.userList[0] = this.searchResult[index]
          } else {
            this.userList.push(this.searchResult[index])
          }
          this.checked = this.userList.map((dd) => {
            return dd.userId
          })
          this.$forceUpdate()
        } else {
          this.cancle(this.searchResult[index].userId)
        }
        setTimeout(() => {
          this.keywords = ''
          this.setChange()
        }, 500)
      },
      treeFormat(list) {
        let dealOptions = []
        list.forEach((one) => {
          let findIndex = list.findIndex((item) => {
            return item.id === one.parentId
          })
          if ((!one.parentId && one.parentId !== 0 && one.parentId !== false) || findIndex === -1) {
            dealOptions.push(one)
          } else {
            if (!list[findIndex].children) {
              list[findIndex].children = []
              list[findIndex].children.push(one)
            } else {
              list[findIndex].children.push(one)
            }
          }
        })
        return dealOptions
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          if (!Array.isArray(this.defaultValues) || this.defaultValues.length == 0) {
            this.userList = []
          }
          getDeptTree().then(({ data }) => {
            let _data = this.handleDepart(data)
            let value = this.treeFormat(_data)
            if (value.length) {
              this.deptId = value[0].deptId
            }
            resolve(value)
          })
        } else {
          getDeptUser({ deptId: node.data.id }).then(({ rows }) => {
            let arr = this.handleUser(rows)
            node.data.children && arr.push(...node.data.children)
            resolve(arr)
          })
        }
      },
      handleDepart(data) {
        return data.map((i) => {
          if (i.deptId) {
            i.userId = i.deptId
            i.name = i.deptName
            i.id = i.deptId
            i.isParty = true
          }
          return i
        })
      },
      handleUser(data) {
        return data.map((i) => {
          if (i.weUserId) {
            i.userId = this.isWechat ? i.weUserId : i.userId
            i.name = i.userName
          }
          return i
        })
      },
      // 选择变化
      handleCheckChange(data, checked, indeterminate) {
        // console.log(arguments)
        if (checked) {
          if (this.isSigleSelect) {
            // 单选情况
            this.$refs.tree.setCheckedKeys([data.userId])
          }
          if (this.isOnlyLeaf) {
            if (data.userId && !data.isParty) {
              this.userList.push(data)
            }
          } else {
            const isExist = this.userList.findIndex((i) => i.userId === data.userId) > -1
            !isExist && this.userList.push(data)
          }
        } else {
          // let index = this.userList.indexOf(data)
          let index = this.userList.findIndex((i) => i.userId === data.userId)
          index > -1 && this.userList.splice(index, 1)
        }
        // console.log(data, checked, indeterminate);
        this.userList = this.unique(this.userList)
      },
      unique(arr) {
        for (var i = 0; i < arr.length; i++) {
          for (var j = i + 1; j < arr.length; j++) {
            if (arr[i].userId.split('_')[0] == arr[j].userId.split('_')[0]) {
              arr.splice(j, 1)
              j--
            }
          }
        }
        return arr
      },
      // 确 定
      submit() {
        this.Pvisible = false
        this.$emit('success', [...this.userList])
      },
      // 取消选择
      cancle(key) {
        this.$refs.tree.setChecked(key, false)
        let index = this.userList.findIndex((i) => i.userId === key)
        index > -1 && this.userList.splice(index, 1)
        let order = this.defaultValues.findIndex((i) => i.userId === key)
        order > -1 && this.defaultValues.slice().splice(order, 1)
      }
    }
  }
</script>
<template>
  <el-dialog :title="title" :visible.sync="Pvisible" :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
    <el-row :gutter="20" style="min-height: 400px;">
      <el-col :span="12" :xs="24">
        <div class="head-container">
          <div class="search-input">
            <el-input
              size="mini"
              v-model="keywords"
              @keyup.enter.native="setSearch"
              placeholder="请输入员工名称"
              clearable
              @change="setChange"
            >
              <el-button slot="append" icon="el-icon-search" @click="setSearch"></el-button>
            </el-input>
          </div>
          <div class="search-list user-list" v-show="searchState">
            <el-checkbox-group v-model="checked">
              <el-row v-for="(item, index) in searchResult" :key="index">
                <el-checkbox :label="item.userId" :key="index" @change="setSelectChange($event, index)">
                  <div>{{ item.name }} - {{ item.userDepts[0].deptName }}</div>
                </el-checkbox>
              </el-row>
            </el-checkbox-group>
          </div>
          <transition name="fade">
            <div class="head-container" v-show="!searchState">
              <el-tree
                node-key="nodeKey"
                ref="tree"
                lazy
                accordion
                show-checkbox
                :check-on-click-node="false"
                :expand-on-click-node="true"
                :load="loadNode"
                :props="defaultProps"
                :check-strictly="isOnlyLeaf"
                @check-change="handleCheckChange"
              ></el-tree>
            </div>
          </transition>
        </div>
      </el-col>
      <el-col :span="12" :xs="24" class="user-list">
        <el-row :gutter="10">选择人员列表</el-row>
        <el-row v-for="(item, index) in userList" :key="index">
          <i class="el-icon-user-solid"></i>
          {{ item.name }}
          <i class="el-icon-minus fr cp" title="取消选择" @click="cancle(item.userId)"></i>
        </el-row>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="Pvisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .content {
    min-height: 400px;
  }
  .search-input {
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .user-list {
    .el-row {
      line-height: 26px;
    }
  }
  .search-list {
    margin-top: 20px;
    padding: 0 10px;
  }
  .fade-enter-active {
    transition: opacity 0.5s;
  }
  .fade-enter {
    opacity: 0;
  }
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-leave-to {
    opacity: 0;
  }
</style>
